.generate-columns {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 10px));
  column-gap: 20px;
  height: 100%;

  > div {
    border: 1px solid #f1f2f6;
    min-height: 300px;
    height: 100%;

    .title {
      padding: 20px;
      font-size: 18px;
      border-bottom: 1px solid #f1f2f6;
      background: #f1f2f6;
    }
    > div {
      padding: 0 20px;
    }
  }

  .ant-tabs-tabpane {
    .ant-btn {
      display: inherit;
      margin-left: auto;
      margin-bottom: 10px;
    }
  }

  .condition {
    .container {
      height: calc(100% - 100px);

      overflow-y: overlay;

      .config-btn-group {
        margin-bottom: 20px;
      }
    }

    .footer {
      padding: 20px;
      .ant-btn {
        margin-right: 20px;
      }
    }
  }

  .code {
    min-height: 500px;
    .ant-tabs {
      height: calc(100% - 100px);

      .ant-tabs-content,
      .ant-tabs-tabpane {
        height: 100%;

        pre {
          height: calc(100% - 50px);
        }
      }
    }
  }
}

@media all and (max-width: 1650px) {
  .generate-columns {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}
